<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form :inline="true" :model="searchVo" class="demo-form-inline">
        <el-form-item label="菜单名称:">
          <el-input
            v-model="searchVo.fullName"
            placeholder="菜单名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="initMenu()"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-circle-plus"
            @click="unFoldAll()"
            >展开所有</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-circle-plus"
            @click="collapseAll()"
            >折叠所有</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-circle-plus"
            @click="dialogFormVisible = true"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="menuId"
        node-key="menuId"
        ref="selectTree"
        border
        :default-expand-all="isExpand"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="姓名" sortable width="180">
        </el-table-column>
        <el-table-column prop="code" label="菜单编号"> </el-table-column>
        <el-table-column prop="pcode" label="父级编号"> </el-table-column>
        <el-table-column prop="url" label="请求地址"> </el-table-column>
        <el-table-column
          prop="menuFlag"
          label="是否是菜单"
          :formatter="formatter"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="deleteMenu(scope.row)">删除</el-button>
            <el-button type="text" size="small" @click="editMenu(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="菜单管理" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <el-form :model="menu" :rules="menuRules" ref="menuForm">
        <el-form-item label="菜单名称" label-width="120px" prop="name">
          <el-input v-model="menu.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单编码" label-width="120px" prop="code">
          <el-input v-model="menu.code" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="父级菜单" label-width="120px" prop="pcode">
          <el-input v-model="menu.pname" autocomplete="off" @focus="innerVisible = true"></el-input>
        </el-form-item>
        <el-form-item label="是否是菜单" label-width="120px">
                <el-radio-group v-model="menu.menuFlag">
                    <el-radio label="Y">是</el-radio>
                    <el-radio label="N">不是</el-radio>
                </el-radio-group>

        </el-form-item>
        <el-form-item label="请求地址" label-width="120px" prop="url">
          <el-input v-model="menu.url" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
       <el-dialog
            width="30%"
            title="父级菜单"
            :visible.sync="innerVisible"
            append-to-body>
                <el-tree
                    :data="tableData"
                    :props="defaultProps"
                    accordion
                    @node-click="handleNodeClick">
                </el-tree>
            </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitMenu('menuForm')">确 定</el-button>
      </div>
      
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchVo: {},
      tableData: [],
      menu:{menuFlag:"Y"},
      isExpand: false,
      dialogFormVisible:false,
      innerVisible:false,
        defaultProps: {
            children: 'children',
            label: 'name'
        },
      menuRules:{
           name:[
              { required: true, message: '请输入菜单名称', trigger: 'blur' },
           ],
           code:[
              { required: true, message: '请输入菜单编码', trigger: 'blur' },
           ],
           pcode:[
              { required: true, message: '请输入父级名称', trigger: 'click' },
           ],
           url:[
              { required: true, message: '请输入菜单地址', trigger: 'blur' },
           ],

      }
    };
  },
  created() {
    this.initMenu();
  },

  methods: {
      //编辑
     async editMenu(row){
         let result= await this.$http.get("/system/menu/getMenuById/"+row.menuId);
         if(result.data.code===20000){
             this.menu=result.data.data.menu;
             this.dialogFormVisible=true;
         }
      },
      //删除菜单
    async deleteMenu(row){
         let result=await this.$http.delete("/system/menu/deleteMenu/"+row.menuId); 
         if(result.data.code===20000){
             this.$message.success(result.data.message);
             this.initMenu();
         }else{
            this.$message.error(result.data.message); 
         }
    },
      //关闭模态框前触发
    handleClose(){
           this.menu={menuFlag:"Y"};
    },
    onSubmitMenu(menuForm){
        let id=this.menu.menuId;
        if(id){
            this.onEditSubmitMenu(menuForm);
        }else{
            this.onAddSubmitMenu(menuForm);
        }

    }, 
    onEditSubmitMenu(menuForm){
        this.$refs[menuForm].validate(async (valid) => {
                if (valid) {
                    let result=await this.$http.post("/system/menu/editMenu",this.menu);
                    if(result.data.code===20000){
                        this.$message.success(result.data.message);
                        this.dialogFormVisible=false;
                        this.initMenu();
                    }else{
                        this.$message.error(result.data.message); 
                    }
                } else {
                    return false;
                }
                });
    },
    //提交添加
    onAddSubmitMenu(menuForm){
        this.$refs[menuForm].validate(async (valid) => {
          if (valid) {
             let result=await this.$http.post("/system/menu/addMenu",this.menu);
             if(result.data.code===20000){
                  this.$message.success(result.data.message);
                  this.dialogFormVisible=false;
                  this.initMenu();
             }else{
                this.$message.error(result.data.message); 
             }
          } else {
            return false;
          }
        });
    },
    formatter(row, column) {
      return row.menuFlag === "Y" ? "是" : "否";
    },
    // 全部展开
    unFoldAll() {
      this.isExpand = true;
    },
    // 全部折叠
    collapseAll() {
      this.isExpand = false;
    },
    async initMenu() {
      let result = await this.$http.post(
        "/system/menu/queryMenuTreeByCon",
        this.searchVo
      );
      if (result.data.code === 20000) {
        this.tableData = result.data.data.allMenuTree;
      }
    },
    handleNodeClick(data){
           this.menu.pcode=data.code;
           this.menu.pname=data.name;
           this.innerVisible=false;
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([]);
      }, 1000);
    },
  },
};
</script>
<style scoped>
</style>